<template>
	<div class="system-add-role-container">
		<el-dialog title="修改用户到期时间" v-model="state.dialog.isShowDialog" :destroy-on-close="true" width="400px" :close-on-click-modal="false">
			<el-form :model="state.ruleForm" label-width="120px">
				<el-form-item label="用户名">
					<el-input v-model="state.ruleForm.username" disabled />
				</el-form-item>
				<el-form-item label="到期时间">
					<el-date-picker
						v-model="state.ruleForm.vip_expire_time"
						type="datetime"
						placeholder="选择日期时间"
						value-format="YYYY-MM-DD HH:mm:ss"
						:default-value="state.ruleForm.vip_expire_time"
						:shortcuts="state.shortcuts"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="state.ruleForm.password" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
					<!-- <el-button>Cancel</el-button> -->
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="editUser">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { editUser } from '/@/api/user';
import moment from 'moment';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	ruleForm: {
		username: '',
		vip_expire_time: '',
		password: '',
	},
	shortcuts: [] as any,
	confirmLoading: false,
	testLoading: false,
	allProduct: [] as any,
});

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 打开弹窗
const openDialog = async (row: any) => {
	state.shortcuts = [];
	// state.allProduct = await getAllProduct()
	state.dialog.isShowDialog = true;
	state.ruleForm = JSON.parse(JSON.stringify(row));
	state.shortcuts = [
		{
			text: '月卡',
			value: () => {
				const start = new Date(row.vip_expire_time).getTime() + 30 * 24 * 60 * 60 * 1000;
				return start;
			},
		},
		{
			text: '季卡',
			value: () => {
				const start = new Date(row.vip_expire_time).getTime() + 90 * 24 * 60 * 60 * 1000;
				return start;
			},
		},
		{
			text: '年卡',
			value: () => {
				const start = new Date(row.vip_expire_time).getTime() + 365 * 24 * 60 * 60 * 1000;
				return start;
			},
		},
	];
};

const onSubmit = () => {
	state.ruleForm.vip_expire_time = moment(state.ruleForm.vip_expire_time).format('YYYY-MM-DD HH:mm:ss');
	editUser(state.ruleForm).then(() => {
		ElMessage.success('保存成功');
		emit('refresh');
		closeDialog();
	});
};

// 取消
// const onCancel = () => {
// 	closeDialog();
// };

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.push_interval {
	padding-right: 5px;

	:deep {
		.el-input__suffix-inner {
			width: 18px;
		}
	}
}

.executionCycleDay {
	justify-content: space-around;
	display: flex;

	.executionCycleDayInput {
		width: 50%;
	}
}

.system-add-role-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
